<template>
  <div class="scroll-display">
    <div class="scroll-header w-web">
      <span class="col-date">日期</span>
      <span class="col-region">地区</span>
      <span class="col-target">捐赠对象</span>
      <span class="col-type">类型</span>
      <span class="col-amount">金额</span>
    </div>
    <div class="scroll-content" ref="contentRef">
      <div
        class="inner"
        :style="{ animationDuration: animationDuration + 's' }"
      >
        <div
          class="item text-sm"
          v-for="(item, index) in duplicatedItems"
          :key="index"
        >
          <span class="col-date" v-html="item[0]"></span>
          <span class="col-region" v-html="item[1]"></span>
          <span class="col-target" v-html="item[2]"></span>
          <span class="col-type" v-html="item[3]"></span>
          <span class="col-amount" v-html="item[4]"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, nextTick } from 'vue';

const props = defineProps({
  renderData: {
    type: String,
    required: true,
  },
  renderCount: {
    type: Number,
    default: 5,
  },
  scrollSpeed: {
    type: Number,
    default: 50, // 滚动速度，数值越大，速度越快
  },
});

const duplicatedItems = ref<Array<Array<string>>>([]);

function processRenderData() {
  const parser = new DOMParser();
  const doc = parser.parseFromString(props.renderData, 'text/html');
  const pTags = doc.querySelectorAll('p');
  const items: Array<Array<string>> = [];

  pTags.forEach((p) => {
    const content = p.innerHTML.trim();
    const elements = content.split(/(?:\s|&nbsp;)+/);
    if (elements.length === 5 && /^\d{4}\.\d{2}\.\d{2}$/.test(elements[0])) {
      items.push(elements);
    }
  });

  // 不再截取数据，展示所有数据
  const itemsToDisplay = items;

  // 为了实现无缝滚动，复制一份数据
  duplicatedItems.value = itemsToDisplay.concat(itemsToDisplay);
}

const contentRef = ref<HTMLElement | null>(null);
const animationDuration = ref<number>(0);

function calculateAnimationDuration() {
  nextTick(() => {
    if (contentRef.value) {
      const contentHeight = contentRef.value.scrollHeight / 2; // 因为复制了一份数据，所以高度除以2
      const speed = props.scrollSpeed; // 数值越大，速度越快
      animationDuration.value = contentHeight / speed;
    }
  });
}

watch(
  () => props.renderData,
  () => {
    processRenderData();
    calculateAnimationDuration();
  }
);

onMounted(() => {
  processRenderData();
  calculateAnimationDuration();
});
</script>

<style scoped>
.scroll-display {
  overflow: hidden;
  border: 1px solid #ccc;
}

.scroll-header,
.item {
  display: flex;
}

.scroll-header span,
.item span {
  text-align: center;
  padding: 8px;
}

.col-date {
  flex: 1;
}
.col-region {
  flex: 1;
}
.col-target {
  flex: 2;
}
.col-type {
  flex: 1;
}
.col-amount {
  flex: 1;
}

.scroll-header {
  background-color: #f5f5f5;
  font-weight: bold;
  position: sticky;
  top: 0;
}

.scroll-content {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.inner {
  display: flex;
  flex-direction: column;
  animation-name: scrollUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* 移动一半的高度，因为我们复制了数据 */
  }
}

/* 可选：添加一些基本样式 */
.item:nth-child(even) {
  background-color: #fafafa;
}
</style>
